/**
 * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
 * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
 */

import ImageUpload from '#/components/ImageUpload/index.vue'
import TableSelect from '#/components/TableSelect/index.vue'
import TableSelectModal from '#/components/TableSelectModal/index.vue'

import Tinymce from '#/components/Tinymce/index.vue'
import type { BaseFormComponentType } from '@vben/common-ui'
import { globalShareState, IconPicker } from '@vben/common-ui'
import { $t } from '@vben/locales'
import {
    AutoComplete,
    Button,
    Cascader,
    Checkbox,
    CheckboxGroup,
    DatePicker,
    Divider,
    Input,
    InputNumber,
    InputPassword,
    Mentions,
    notification,
    Radio,
    RadioGroup,
    RangePicker,
    Rate,
    Select,
    Space,
    Switch,
    Textarea,
    TimePicker,
    TimeRangePicker,
    TreeSelect,
    Upload
} from 'ant-design-vue'
import type { Component, SetupContext } from 'vue'
import { h } from 'vue'
import iconsData from './icons.data'

const withDefaultPlaceholder = <T extends Component>(component: T, type: 'input' | 'select') => {
    return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
        const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`)
        return h(component, { ...props, ...attrs, placeholder }, slots)
    }
}

const icons = iconsData.icons.map((icon) => `${iconsData.prefix}:${icon}`)

// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
export type ComponentType =
    | 'AutoComplete'
    | 'Cascader'
    | 'Checkbox'
    | 'CheckboxGroup'
    | 'DatePicker'
    | 'DefaultButton'
    | 'Divider'
    | 'IconPicker'
    | 'ImageUpload'
    | 'Input'
    | 'InputNumber'
    | 'InputPassword'
    | 'JumpLinkConfig'
    | 'LayoutConfigGap'
    | 'Mentions'
    | 'PrimaryButton'
    | 'Radio'
    | 'RadioGroup'
    | 'RangePicker'
    | 'Rate'
    | 'Select'
    | 'Space'
    | 'Switch'
    | 'TableSelect'
    | 'TableSelectModal'
    | 'Textarea'
    | 'TimePicker'
    | 'TimeRangePicker'
    | 'Tinymce'
    | 'TreeSelect'
    | 'Upload'
    | BaseFormComponentType

async function initComponentAdapter() {
    const components: Partial<Record<ComponentType, Component>> = {
        // 如果你的组件体积比较大，可以使用异步加载
        // Button: () =>
        // import('xxx').then((res) => res.Button),

        AutoComplete,
        Checkbox,
        CheckboxGroup,
        DatePicker,
        Tinymce,
        ImageUpload,
        // 自定义默认按钮
        DefaultButton: (props, { attrs, slots }) => {
            return h(Button, { ...props, attrs, type: 'default' }, slots)
        },
        Divider(props, { attrs, slots }) {
            return h(Divider, { dashed: true, ...props, attrs, width: 'auto' }, slots)
        },
        Input: withDefaultPlaceholder(Input, 'input'),
        InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
        InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
        Mentions: withDefaultPlaceholder(Mentions, 'input'),
        // 自定义主要按钮
        PrimaryButton: (props, { attrs, slots }) => {
            return h(Button, { ...props, attrs, type: 'primary' }, slots)
        },
        Radio,
        RadioGroup,
        RangePicker,
        Rate,
        Select: withDefaultPlaceholder(Select, 'select'),
        Space,
        Switch,
        Textarea: withDefaultPlaceholder(Textarea, 'input'),
        TimePicker,
        TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
        Upload,
        TableSelect,
        TableSelectModal,
        IconPicker: (props, { attrs, slots }) => {
            const modelValue = props.modelValue
                ? props.modelValue.includes(':')
                    ? props.modelValue
                    : `ant-design:${props.modelValue}`
                : ''

            const iconsProps = {
                value: modelValue,
                prefix: '',
                icons,
                onChange: (icon: string) => {
                    props?.['onUpdate:modelValue']?.(icon)
                    props?.['onUpdate:value']?.(icon)
                }
            }

            return (
                <Input {...props} {...attrs}>
                    {{
                        addonAfter: () => <IconPicker {...iconsProps}></IconPicker>,
                        suffix: () => (
                            <Button
                                href="https://icones.js.org/collection/clarity"
                                size="small"
                                target="_blank"
                                title={$t('components.IconPicker.children.toIconLibrary')}
                                type="link"
                            >
                                {$t('components.IconPicker.children.iconLibrary')}
                            </Button>
                        ),
                        ...slots
                    }}
                </Input>
            )
        },
        Cascader,
        TimeRangePicker
    }

    // 将组件注册到全局共享状态中
    globalShareState.setComponents(components)

    // 定义全局共享状态中的消息提示
    globalShareState.defineMessage({
        // 复制成功消息提示
        copyPreferencesSuccess: (title, content) => {
            notification.success({
                description: content,
                message: title,
                placement: 'bottomRight'
            })
        }
    })
}

export { initComponentAdapter }
